<template>
  <el-container>
    <!-- 头部盒子 -->
    <el-header>
      <!-- 左边logo区域 -->
      <div class="logo">
        <img src="../assets/logo.png" alt />
        <span>毕业设计选题管理系统</span>
      </div>
      <!-- 右边退出登陆按钮 -->
      <div class="right">
        <el-avatar
          :size="48"
          :src="avator"
          @click.native="goCenter"
        ></el-avatar>
        <el-tag type="primary">{{ $store.state.username }}</el-tag>
        <el-tag type="success">{{ headerRole }}</el-tag>
        <el-button type="info" @click="logout">退出登陆</el-button>
      </div>
    </el-header>
    <el-container>
      <!-- 侧边栏盒子 -->
      <el-aside width="200px">
        <el-menu
          :default-active="activePath"
          class="el-menu-vertical-demo"
          background-color="#333744"
          text-color="#fff"
          active-text-color="#409EFF"
          router
          unique-opened
        >
          <!-- 用户管理 -->
          <el-submenu index="1" v-if="role === 'admin'">
            <template slot="title">
              <i class="iconfont icon-user"></i>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/users" @click="saveNavstate('/users')">
              <i class="el-icon-menu"></i>
              <span slot="title">用户列表</span>
            </el-menu-item>
          </el-submenu>
          <!-- 题目管理 -->
          <el-submenu index="2" v-if="role === 'admin'">
            <template slot="title">
              <i class="iconfont icon-danju"></i>
              <span>题目管理</span>
            </template>
            <el-menu-item index="/articles" @click="saveNavstate('/articles')">
              <i class="el-icon-menu"></i>
              <span slot="title">题目列表</span>
            </el-menu-item>
            <el-menu-item
              index="/articles/add"
              @click="saveNavstate('/articles/add')"
            >
              <i class="el-icon-menu"></i>
              <span slot="title">添加题目</span>
            </el-menu-item>
          </el-submenu>
          <!-- 学生管理 -->
          <el-submenu index="3" v-if="role === 'admin'">
            <template slot="title">
              <i class="iconfont icon-users"></i>
              <span>学生管理</span>
            </template>
            <el-menu-item index="/students" @click="saveNavstate('/students')">
              <i class="el-icon-menu"></i>
              <span slot="title">学生列表</span>
            </el-menu-item>
            <el-menu-item
              index="/students/not"
              @click="saveNavstate('/students/not')"
            >
              <i class="el-icon-menu"></i>
              <span slot="title">未选志愿学生列表</span>
            </el-menu-item>
            <el-menu-item
              index="/students/true"
              @click="saveNavstate('/students/true')"
            >
              <i class="el-icon-menu"></i>
              <span slot="title">已选志愿学生列表</span>
            </el-menu-item>
          </el-submenu>

          <!-- 老师用户的 题目管理 -->
          <el-submenu index="4" v-if="role === 'teacher'">
            <template slot="title">
              <i class="iconfont icon-danju"></i>
              <span>题目管理</span>
            </template>
            <el-menu-item
              index="/teacher/articles"
              @click="saveNavstate('/teacher/articles')"
            >
              <i class="el-icon-menu"></i>
              <span slot="title">题目列表</span>
            </el-menu-item>
            <el-menu-item
              index="/teacher/articles/add"
              @click="saveNavstate('/teacher/articles/add')"
            >
              <i class="el-icon-menu"></i>
              <span slot="title">添加题目</span>
            </el-menu-item>
          </el-submenu>

          <!-- 学生用户的 选题 -->
          <el-submenu index="5" v-if="role === 'student'">
            <template slot="title">
              <i class="iconfont icon-danju"></i>
              <span>选题管理</span>
            </template>
            <el-menu-item
              index="/student/select"
              @click="saveNavstate('/student/select')"
            >
              <i class="el-icon-menu"></i>
              <span slot="title">题目列表</span>
            </el-menu-item>
          </el-submenu>

          <!-- 管理员的评论管理 -->
          <el-submenu index="6" v-if="role === 'admin'">
            <template slot="title">
              <i class="iconfont icon-danju"></i>
              <span>评论管理</span>
            </template>
            <el-menu-item index="/comment" @click="saveNavstate('/comment')">
              <i class="el-icon-menu"></i>
              <span slot="title">评论列表</span>
            </el-menu-item>
          </el-submenu>

          <!-- 学生的查看评论 -->
          <el-submenu index="7" v-if="role === 'student' || role === 'teacher'">
            <template slot="title">
              <i class="iconfont icon-danju"></i>
              <span>评论管理</span>
            </template>
            <el-menu-item index="/sComment" @click="saveNavstate('/sComment')">
              <i class="el-icon-menu"></i>
              <span slot="title">我的评论</span>
            </el-menu-item>
          </el-submenu>

          <!-- 个人中心 -->
          <el-submenu index="8">
            <template slot="title">
              <i class="iconfont el-icon-s-home"></i>
              <span>个人中心</span>
            </template>
            <el-menu-item index="/center" @click="saveNavstate('/center')">
              <i class="el-icon-menu"></i>
              <span slot="title">设置</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 主体内容盒子 -->
      <el-main>
        <transition name="main" mode="out-in">
          <router-view @handleNavChange="navChange"></router-view>
        </transition>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  data() {
    return {
      // 当前点亮的nav导航
      activePath: ''
    }
  },
  async created() {
    // 页面创建时获取session中的activePath，赋值给data()中的activePath
    this.activePath = window.sessionStorage.getItem('activePath')

    // 页面刷新时，vuex中数据没了，需要重新获取用户信息
    this.getUserInfo()
  },
  methods: {
    ...mapActions(['getUserInfo']),
    // 退出登陆
    async logout() {
      const { data: res } = await this.$http.post('logout')
      // 对请求结果进行判断
      if (res.meta.status !== 200) {
        this.$message.error('退出登陆失败')
      }
      this.$message.success('退出登陆成功')

      // 清空sessionStorage
      window.sessionStorage.clear()
      window.localStorage.clear()

      // 跳转到登陆页面
      this.$router.push('/login')
    },
    // 保存当前选择的nav标签
    saveNavstate(activePath) {
      // 将二级导航的:index值存储到session中
      window.sessionStorage.setItem('activePath', activePath)
      // 点击的时候也赋值一次
      this.activePath = activePath
    },
    // 监听子组件触发的方法
    navChange() {
      // 清空侧边栏选中状态
      this.activePath = ''
      window.sessionStorage.setItem('activePath', '')
    },
    // 点击头像前往中心
    goCenter() {
      if (this.$router.history.current.fullPath === '/center') {
        return
      }
      this.$router.push('/center')
    }
  },
  computed: {
    ...mapState(['role', 'avator']),
    headerRole() {
      let role = this.$store.state.role
      return role === 'admin' ? '管理员' : role === 'teacher' ? '老师' : '学生'
    }
  }
}
</script>

<style lang="less" scoped>
.el-container {
  height: 100%;
}
.el-header {
  background-color: #373d41;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 0;
  .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 50px;
      height: 50px;
    }
    span {
      font-size: 20px;
      padding-left: 5px;
      color: #fff;
    }
  }
}
.el-aside {
  background-color: #333744;
}
.el-main {
  background-color: #eaedf1;
}
.el-menu {
  border-right: 0;
}
.iconfont {
  margin-right: 5px;
}

.right {
  display: flex;
  align-items: center;
  .el-tag {
    margin-left: 15px;
  }
  .el-button {
    height: 80%;
    margin-left: 30px;
  }
}

.main-enter-active,
.main-leave-active {
  transition: all 0.2s;
}
.main-enter,
.main-leave-to {
  transform: translateY(15px);
  opacity: 0;
}
</style>
